<template>
	<div class="simple_video_player">
		<template v-if="!!src">
			<video ref="video" :src="src"></video>
			<div class="slider" :style="sliderStyle"></div>
			<span :class="statusClass" @click="handleVideoControl()"></span>
		</template>
		<el-empty v-else :image-size="64" :image="novideo">
			<template slot="description">暂无视频，请上传视频</template>
		</el-empty>
	</div>
</template>

<script>
export default {
	name: 'simpleVideoPlayer',
	props: {
		src: { type: String, default: '' }
	},
	data() {
		return {
			videoStatus: 0,
			sliderStyle: {},
			novideo: require('@/assets/img/novideo.svg')
		};
	},
	computed: {
		statusClass() {
			if (this.videoStatus === 0) {
				return 'el-icon-video-play';
			} else if (this.videoStatus === 1) {
				return 'el-icon-video-pause';
			} else if (this.videoStatus === 2) {
				return 'el-icon-refresh';
			}
		}
	},
	watch: {
		src: {
			handler(val) {
				this.$nextTick(() => this.initializeVideo());
			},
			immediate: true
		}
	},
	methods: {
		//初始化视频
		initializeVideo() {
			let video = this.$refs['video'];
			if (!video) return false;
			video.addEventListener('loadedmetadata', (play) => {
				this.videoStatus = play.target.paused && !play.target.ended ? 0 : 1;
			});
			video.addEventListener('timeupdate', (play) => {
				let playPercentage = (play.target.currentTime / play.target.duration) * 100 + '%';
				this.$set(this.sliderStyle, '--playNum', playPercentage);
			});
			video.addEventListener('progress', (play) => {
				if (play.target.buffered.length > 0) {
					let duration = play.target.duration;
					let loaded = play.target.buffered.end(0) || 0;
					let loadPercentage = (loaded / duration) * 100 + '%';
					this.$set(this.sliderStyle, '--loadNum', loadPercentage);
				} else {
					this.$set(this.sliderStyle, '--loadNum', '100%');
				}
			});
			video.addEventListener('play', (play) => {
				this.videoStatus = 1;
			});
			video.addEventListener('pause', (play) => {
				this.videoStatus = 0;
			});
			video.addEventListener('ended', (play) => {
				this.videoStatus = 2;
			});
		},

		handleVideoControl() {
			let videoEle = this.$refs['video'];
			if (this.videoStatus === 0) {
				this.handleVideoPlay(videoEle);
			} else if (this.videoStatus === 1) {
				this.handleVideoPause(videoEle);
			} else if (this.videoStatus === 2) {
				this.handleVideoReplay(videoEle);
			}
		},

		//视频播放
		handleVideoPlay(video) {
			video.play();
		},

		//视频暂停
		handleVideoPause(video) {
			video.pause();
		},

		//视频重播
		handleVideoReplay(video) {
			video.currentTime = 0;
			video.play();
		},

		//视频停止播放
		handleVideoStop() {
			let videoEle = this.$refs['video'];
			if(!videoEle) return false;
			videoEle.pause();
			this.videoStatus = 0;
			videoEle.currentTime = 0;
		}
	}
};
</script>

<style lang="scss" scoped>
.simple_video_player {
	width: 100%;
	padding-top: calc(56.25% + 4px);
	position: relative;
	overflow: hidden;
	video {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: calc(100% - 4px);
	}
	span {
		position: absolute;
		cursor: pointer;
		color: #fff;
		transition: all 0.25s linear;
		&.el-icon-video-play {
			left: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
			display: flex;
			font-size: 56px;
			align-items: center;
			justify-content: center;
			background-color: rgba(0, 0, 0, 0.5);
		}
		&.el-icon-refresh,
		&.el-icon-video-pause {
			left: 10px;
			bottom: 10px;
			width: auto;
			height: auto;
			font-size: 32px;
			color: var(--primary);
			background-color: transparent;
		}
	}
	.slider {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 4px;
		overflow: hidden;
		background-color: #ebeef5;
		&::after,
		&::before {
			position: absolute;
			top: 0;
			left: 0;
			content: '';
			height: 100%;
		}
		&::after {
			width: var(--loadNum);
			transition: width 0.1s linear;
			background-color: var(--primary-border-plain);
		}
		&::before {
			width: var(--playNum);
			background-color: var(--primary);
		}
	}
	.el-empty::v-deep {
		position: absolute;
		top: 0;
		left: 0;
		margin: 0;
		width: 100%;
		height: 100%;
		display: flex;
		border-radius: 4px;
		align-items: center;
		flex-direction: column;
		box-sizing: border-box;
		justify-content: center;
		border: dashed 1px #e4e7ed;
		.el-empty__image {
			overflow: hidden;
			img {
				transform: translateX(64px);
				filter: drop-shadow(#909399 -64px 0px 0px);
			}
		}
		.el-empty__description {
		}
	}
}
</style>
